<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <title>会员钱包后台管理系统</title>

    <link rel="shortcut icon" href="${system}/static/favicon.ico">
    <script src="${system}/static/js/mavatar.js"></script>
    <link href="${system}/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <style>
        .button {
            outline: 0;
            display: inline-block;
            margin-bottom: 0;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            background-image: none;
            border: 1px solid transparent;
            white-space: nowrap;
            line-height: 1.5;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding: 6px 15px;
            font-size: 12px;
            border-radius: 4px;
            transition: color .2s linear, background-color .2s linear, border .2s linear, box-shadow .2s linear;
            color: #495060;
            background-color: #f7f7f7;
            border-color: #dddee1;
        }

        .button-info {
            color: #fff;
            background-color: #2db7f5;
            border-color: #2db7f5;
        }

        .avatarbox {
            width: 200px;
            margin: 0 auto
        }

        #avatar {
            width: 200px;
            margin-top: 200px;
        }

        .botton-box {
            width: 140px;
            margin: 0 auto;
            margin-top: 20px
        }
    </style>

</head>

<body style="background-color:#fafafa">

<div class="avatarbox">
    <div id="avatar"></div>
    <div class="botton-box">
        <button onClick="clip()" class="button button-info" style="float: left" name="photo">上传</button>
        <button onClick="reset()" class="button" style="float: right">重置</button>
    </div>
</div>

<script type="text/javascript" src="${system}/static/js/mavatar.js"></script>
<script src="${system}/static/js/alert.js"></script>
<script>
    var avatar = new Mavatar({
        el: '#avatar',
        backgroundColor: '#fff',
        fileOnchange: function (e) {
            console.log(e)
        }
    });

    function clip() {
        avatar.imageClipper(function (data) {
            console.log(data);
            //  将图片上传至后台
            swal({
                title: "确定要替换二维码吗?",
                text: "替换后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "取消",
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "替换",
                closeOnConfirm: false
            }, function () {
                ajax('${system}/pay/photo.do', {"data": data}, "text", "post", true, function (data) {
                    if (data=="success"){
                        swal("替换成功！", "您已经替换了该二维码。", "success");
                    } else if(data=="null"){
                        swal("替换失败！", "二维码不得为空。", "error");
                    }else {
                        swal("替换失败！", "替换二维码失败,请稍后再试。", "error");
                    }
                }, function (error) {
                    console.log("error:" + error);
                    swal("替换失败！", "替换二维码失败,请稍后再试。", "error");
                });
            });
        })
    }

    function reset() {
        avatar.resetImage();
    }
</script>

</body>

</html>